<template>
	<div class="page">
		<div class="img-wrap">
			<img class="logo" src="/img/door/sc.jpg" alt="Logo" />
		</div>
		<div class="doors-container">
			<door-component
				btn-color="#345678"
				door-name="前门"
				door-url="/api/accessControl/openTheDoor/前门"
				open-img="/img/door/door1_02.jpg"
				close-img="/img/door/door1_01.jpg"
			></door-component>
			<door-component
				btn-color="#663322"
				door-name="后门"
				door-url="/api/accessControl/openTheDoor/后门"
				open-img="/img/door/door2_02.jpg"
				close-img="/img/door/door2_01.jpg"
			></door-component>
			<door-component
				btn-color="#668800"
				door-name="招标"
				door-url="/api/accessControl/openTheDoor/招标部"
				open-img="/img/door/door3_02.jpg"
				close-img="/img/door/door3_01.jpg"
			></door-component>
		</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import { Switch, Cell, CellGroup, Toast } from 'vant'
	import DoorComponent from '@/components/DoorComponent.vue'
</script>

<style scoped>
	.page {
		display: flex;
		flex-direction: column;
		align-items: margin-left;
		padding: 10px;
	}
	.img-wrap {
		width: 100%;
		display: inline-block;
	}
	.logo {
		width: 100%;
		margin-bottom: 2px;
		object-fit: cover;
	}

	.doors-container {
		padding: 10px;
	}
</style>
